<template>
  <ul id="liebiao">
   <li v-for="renrong in renrongs" :key="renrong.id">
      <div>
        <img :src="renrong.img" alt="" />
      </div>
      <p>{{ renrong.name }}</p>
      <h6>{{ renrong.type }}</h6>
      <h5>
        <img class="xiaoyu" :src="renrong.xiaotu" alt="" />
        <span class="wenzi">{{ renrong.guanfang }}</span
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{
          renrong.shuliang
        }}</span>
        <img class="xin" :src="renrong.xin" alt="" />
      </h5>
    </li>
   <!-- <li>
      <div>
        <img src="../../../public/images/34_03.jpg" alt="" />
      </div>
      <p>有道词典2021年度词汇：</p>
      <h6>Salute!</h6>
      <h5>
        <img class="xiaoyu" src="../../../public/images/27_07.jpg" alt="" />
        <span class="wenzi">wow官方...</span
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>48</span>
        <img class="xin" src="../../../public/images/28_03.jpg" alt="" />
      </h5>
      
    </li>
     <li >
      <div>
        <img src="../../../public/images/30_03.jpg" alt="" />
      </div>
      <p>有道词典2021年度词汇：</p>
      <h6>Salute!</h6>
      <h5>
        <img class="xiaoyu" src="../../../public/images/27_07.jpg" alt="" />
        <span class="wenzi">wow官方...</span
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>48</span>
        <img class="xin" src="../../../public/images/28_03.jpg" alt="" />
      </h5>
      
    </li>
     <li>
      <div>
       <img src="../../../public/images/30_03.jpg" alt="" />
      </div>
      <p>有道词典2021年度词汇：</p>
      <h6>Salute!</h6>
      <h5>
        <img class="xiaoyu" src="../../../public/images/27_07.jpg" alt="" />
        <span class="wenzi">wow官方...</span
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>48</span>
        <img class="xin" src="../../../public/images/28_03.jpg" alt="" />
      </h5>
      
    </li>
     <li>
      <div>
        <img src="../../../public/images/30_03.jpg" alt="" />
      </div>
      <p>有道词典2021年度词汇：</p>
      <h6>Salute!</h6>
      <h5>
        <img class="xiaoyu" src="../../../public/images/27_07.jpg" alt="" />
        <span class="wenzi">wow官方...</span
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>48</span>
        <img class="xin" src="../../../public/images/28_03.jpg" alt="" />
      </h5>
      
    </li> -->
  </ul>
</template>

<script>

import $ from "jquery";
export default {
  name: "renrongs",
  // props:{
  //   type:String
  // },
  data() {
    return {
      renrongs:[],
    };
  },
  created() {
    // ajax发请求
    $.ajax({
        url:"http://localhost:3000/renrong",
          // url:"/renrong",
        success:(data)=>{
          this.renrongs=data;
        },
       
    })
   
  }
};
</script>

<style scoped>
#liebiao {
  width: 3.4rem;
  /* height: 3rem; */
  min-height: 3rem;
  /* border: 0.01rem solid black; */
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#liebiao li {
  /* list-style: none; */
  width: 47%;
  height: 2.3rem;

  /* border: 0.01rem solid black; */
}
#liebiao li div {
  width: 100%;
  height: 1.2rem;
  /* border: 0.01rem solid black; */
}
#liebiao li div img {
  width: 100%;
  height: 100%;
}
#liebiao li p {
  font-size: 0.14rem;
  font-weight: 600;
  margin-top: 0.12rem;
}

#liebiao li h6 {
  font-size: 0.18rem;
  color: black;
  margin-top: 0.06rem;
}

#liebiao li h5 {
  display: flex;
  margin-top: 0.04rem;
}
#liebiao li h5 .xiaoyu {
  height: 0.2rem;
  width: 0.2rem;
}
#liebiao li h5 .wenzi {
  display: block;
  height: 0.2rem;
}
.xin {
  height: 0.2rem;
  width: 0.2rem;
  margin-top: -0.03rem;
  margin-left: 0.07rem;
}
#liebiao li h5 span:nth-of-type(1) {
  background-color: #faf0ed;
  color: #eb5944;
}
#liebiao li h5 span:nth-of-type(1) {
  background-color: #f4f2f3;
  color: #aaa4a6;
}
#liebiao li h4 {
  color: red;
  margin-top: 0.05rem;
}
#liebiao li h4 span {
  font-size: 0.2rem;
}

</style>